<template>
  <div>
    <ReturnCloseNavbar left_arrow />
    <div class="title">手机号注册</div>
    <div class="form">
      <van-form validate-first
                @submit="onSubmit">
        <van-field v-model="number"
                   name="number"
                   placeholder="请输入手机号"
                   maxlength="11"
                   type="digit"
                   clearable
                   error-message-align="right"
                   :rules="[
						{ required: true, message: '请填写手机号' },
						{ validator: validatorPatternNumber, message: '手机号格式错误' },
					]" />
        <div class="submit-button">
          <van-button round
                      block
                      type="default"
                      native-type="submit">下一步</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import ReturnCloseNavbar from './components/ReturnCloseNavbar';

export default {
	name: 'index',
	props: {},
	data() {
		return {
			number: '', //手机号
			pattern_number: /^[1]([3-9])[0-9]{9}$/, //手机号校验正则
		};
	},
	components: {
		ReturnCloseNavbar,
	},
	computed: {},
	mounted() {},
	methods: {
		onSubmit(values) { //校验手机号是否已注册
			_api.api_userPortal_validPhone({
				phone: this.number,
			}).then(res => {
				this.$router.push({ path: '/SetNewPassword', query: {number:this.number, register_set_password: true } });
			}).catch(error => {
				this.$toast.fail(error.data);
			})
		},
		validatorPatternNumber(val) {
			//手机号校验
			return this.pattern_number.test(val);
		},
	},
};
</script>
<style lang='scss' scoped>
.title {
	padding: 0.507246rem 0.531401rem 1.497585rem 0.797101rem;
	font-size: 0.628019rem;
}
.form {
	padding: 0 0.89372rem;

	.van-field {
		align-items: center;
		padding: 0;
		border-bottom: 1px solid #e9e9e9;
		margin-top: 1.014493rem;

		&::after {
			border-bottom: 0;
		}
	}

	.submit-button {
		margin-top: 2.657005rem;

		.van-button--round {
			height: 1.062802rem;
			background-color: #6899f4;

			.van-button__content {
				.van-button__text {
					color: white;
				}
			}
		}
	}
}
</style>